// 使用高阶组件抽离公用逻辑
import React, { Component } from 'react'


function ResizeAble(Com){//接受一个com组件
    return class ResizeAble extends Component {//返回ResizeAble组件(可以不写名字（ResizeAble），就是匿名组件)
        // 初始值
        state={
            //  浏览器可视区的宽度和高度(获取窗口的宽和高);
            // 浏览器窗口的可视区域是指除了地址栏、菜单栏、功能栏以及状态栏等之外的，我们打开网页能显示的那一部分区域。简单理解僦是，浏览器窗口的可视区域就是可以用来显示的区域。
            size:[window.innerWidth,window.innerHeight]
        }
    
        onResize=()=>{
            // 修改state
            this.setState({
                size:[window.innerWidth,window.innerHeight]
            })
    
        }
        // 添加事件
        componentDidMount(){
            // resize：文档视图调整大小时会触发resize事件
            window.addEventListener('resize',this.onResize);
            // 修改可视区的宽高
            document.title=this.state.size.join("x");
        }
    
        // 更新阶段
        componentDidUpdate(){
            document.title=this.state.size.join("x");
        }
        // 销毁期
        componentWillUnmount(){
            window.addEventListener('resize',this.onResize)
        }
        render() {
            
            return (
                <div>
                    {/* 渲染接受的组件 */}
                    <Com size={this.state.size}/>
                </div>
            )
        }
    }
}


class Foo extends Component{
    
    render(){
        let [width,height]=this.props.size;
        return(
            <div>
                {width}x{height}
            </div>
        )
    }
}

export default ResizeAble(Foo);
